<template>
	<div class="box">
			<div class="minbox">
			<h1>初始化密码</h1>
			<el-form ref="formRef" :model="modelRef" :rules="rulesRef" label-width="100px">
				<el-form-item label="用户名" prop="name">
					<el-input type="text" v-model="modelRef.name"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input
					      v-model="modelRef.password"
						  :type="passwordVisible?'text':'password'"
					    >
					      <template #append>
							  <div @click="togglePasswordVisibility">
								   <el-icon v-if="passwordVisible"><View /></el-icon>
								   <el-icon v-else><Hide /></el-icon>
							  </div>
							 
					       </template>
					    </el-input>
				</el-form-item>
				<el-form-item>
					<el-button key="submit" type="primary" :loading="onSubmitLoading" @click="onFinish">提交</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts">
	import {
		reactive,
		ref
	} from "vue";
	import {
		useI18n
	} from "vue-i18n";
	import {
		ElForm,
		ElMessage
	} from "element-plus";
	import { preventSpecialCharacters } from '@/utils/InputCheck'
	import { ApiResetPwd } from './service'
	// 表单值
	const modelRef = reactive({
		name: '',
		password: '',
	});
	const { t } = useI18n();
	// 表单验证
	const rulesRef = reactive({
		name: [
			{ required: true, message: '请输入用户名称', trigger: [ 'change'] },
			{ validator: preventSpecialCharacters, trigger: [ 'change'] }
		],
		password: [
			{ required: true, message: '请输入用户密码', trigger: [ 'change']},
			{ validator: preventSpecialCharacters, trigger: [ 'change'] }
		],

	});
	const passwordVisible=ref(false)
	const togglePasswordVisibility=()=> {
      passwordVisible.value = !passwordVisible.value;
    }
	// form
	const formRef = ref<typeof ElForm>();
	const onSubmitLoading = ref(false)
	const onFinish = async () => {
		onSubmitLoading.value = true;
		try {
			const valid : boolean = formRef.value ? await formRef.value.validate() : false;
			if (valid === true) {
				console.log('验证成功')
				ApiResetPwd(modelRef.name, modelRef.password)
					.then((res:any)=> {
						console.log('sucess')
						ElMessage.warning("初始化密码成功")
					})
			}
		} catch (error) {
			console.log('error', error);
			ElMessage.warning(t('app.global.form.validatefields.catch'));
		}
		onSubmitLoading.value = false;
	};
</script>

<style scoped>
	.box {

		text-align: center;
		width: 100%;
	}

	.minbox {
		margin: auto;
		width: 400px;
		height: 600px;
		padding-top: 100px;
	}
</style>